<style>
	.page {
      text-align: right;margin-top: 10px
  }
  .layout{
      background: #f5f7f9;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
  }
  .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
  }
  .demo-spin-col{
      height: 100px;
      position: relative;
  }
  .mb20 {
      margin-bottom: 20px;
  }
  .layout-logo{
      width: 110px;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 0px;
      left: 0px;
  }
  .layout-nav{
      width: 420px;
      margin: 0 auto;
      margin-right: 20px;
  }
  .layout-footer-center{
      text-align: center;
  }
  .content{
      height: auto;
      background-color:white;
      padding-left: 30px;
      padding-right: 30px;
  }
  .items{
      height:40px;
      line-height:40px
  }
  .info{
      height: auto;
      background-color:#F8F8FF;
      padding-left: 70px;
      padding-right: 70px;
  }
  .header{
      height: 40px;
      background-color: white;
      line-height: 40px;
      border-bottom: 1px solid orangered;
  }
  .info-middle{
      height: 300px;
      background-color: #F8F8FF;
      padding-left: 70px;
      padding-right: 70px;
      padding-bottom: 15px;
  }
  .titles{
      height: 35px;
      background-color: black;
      line-height: 35px;
      font-size: 1rem;
      color: white;
      padding-left: 10px;
  }
  .nopadding .ivu-table-cell {
      padding: 0px 0px;
  }
  .head_btn {
      height:45px;
      line-height:45px;
      width: 130px;
      float: left;
      margin-right: 20px;
  }
  .subsidy-img {
      height: 140px;
      width: 120px;
      position: absolute;
      right: 8%;
      top: 11%;
  }
  .red_color {
      color: red;
      font-size: 15px;
  }
  .centerimg {
      text-align: center;
  }
  .pre_img_style {
      height:500px;
      width:auto;
      max-width: 500px;
  }
</style>

<template>
<div>
    <span style="margin-left: 20px">申请人：</span> <Input v-model="searchDate.name" placeholder="" style="width: 200px" />
    <span style="margin-left: 20px">
      <Select v-model="searchDate.subsidy_type" placeholder="请选择补贴类型" transfer="" style="width: 164px;">
          <Option value="护理补贴">重度残疾人护理补贴</Option>
          <Option value="生活补贴">困难残疾人生活补贴</Option>
      </Select>
    </span>
    <Button type="primary" style="margin-left: 20px" @click="all()"><Icon type="ios-search" />搜索</Button>
    <Button type="primary" style="margin-left: 10px" @click="clearData()"><Icon type="ios-backspace-outline" />清空</Button>
   <div style="margin-top: 20px">
    <Table border :columns="columns1" :data="data6">
        <template slot-scope="{ row }" slot="check_state">
            <strong v-if="row.check_state == '1'" style="color: red">已超时</strong>
            <strong v-else>未超时</strong>
        </template>
        <template slot-scope="{ row }" slot="registerstr">
            <strong v-if="row.registerstr!=='沈阳户籍'" style="color: red">{{ row.registerstr }}</strong>
            <strong v-if="row.registerstr==='沈阳户籍'" style="color: black">{{ row.registerstr }}</strong>
        </template>
        <template slot-scope="{ row }" slot="allowanceskind">
            <strong v-if="row.allowanceskind==='非保障户' && row.subsidy_type === '生活补贴' " style="color: red">{{ row.allowanceskind }}</strong>
            <strong v-if="row.allowanceskind==='非保障户' && row.subsidy_type === '护理补贴' " style="color: black">{{ row.allowanceskind }}</strong>
            <strong v-if="row.allowanceskind!=='非保障户' && row.subsidy_type === '护理补贴' " style="color: black">{{ row.allowanceskind }}</strong>
            <strong v-if="row.allowanceskind!=='非保障户' && row.subsidy_type === '生活补贴' " style="color: black">{{ row.allowanceskind }}</strong>
        </template>
        <template slot-scope="{ row }" slot="disability_type">
            <strong v-if="row.disability_type==='非残疾人'" style="color: red">{{ row.disability_type }}</strong>
            <strong v-if="row.disability_type!=='非残疾人'" style="color: black">{{ row.disability_type +','+row.disability_grade}}</strong>
        </template>
        <template slot-scope="{ row }" slot="funeral_info">
            <strong v-if="row.funeral_info==='1'" style="color: red">查询到该人员殡葬信息</strong>
            <strong v-if="row.funeral_info==='3'" style="color: red">对方接口不允许调用</strong>
            <strong v-if="row.funeral_info == '0'" style="color: black">未查询到该人员殡葬信息</strong>
            <strong v-if="row.funeral_info == '2'" style="color: black">调用失败</strong>
        </template>
        <template slot-scope="{ row }" slot="occupational_info">
            <strong v-if="row.occupational_info==='1'" style="color: red">领取工伤补贴人员</strong>
            <strong v-if="row.occupational_info==='0'" style="color: black">非领取工伤补贴人员</strong>
            <strong v-if="row.occupational_info==='2'" style="color: red">查询失败</strong>
            <strong v-if="row.occupational_info==='3'" style="color: red">对方接口不允许调用</strong>
        </template>
        <template slot-scope="{ row }" slot="orphan_info">
            <strong v-if="row.orphan_info==='1' && row.subsidy_type === '生活补贴' " style="color: red">孤儿</strong>
            <strong v-if="row.orphan_info==='0' && row.subsidy_type === '生活补贴' " style="color: black">非孤儿</strong>
            <strong v-if="row.subsidy_type === '护理补贴' " style="color: black">护理补贴是孤儿与否都满足条件</strong>
        </template>
        <template slot-scope="{ row }" slot="difficulty_info">
            <strong v-if="row.difficulty_info==='0'" style="color: black ">非领取特困供养补贴人员</strong>
            <strong v-if="row.difficulty_info==='1'" style="color: red">领取特困供养补贴人员</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
            <Button type="info" size="small" @click="findinfo(row)">查看详情</Button>
        </template>
    </Table>
</div>
<div class="page">
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" />
</div>
<Modal v-model="show1" title="详细信息" @on-cancel="show1===false" width="800">
    <Form label-position="right" :label-width="100" style="position: relative;">
        <Row class="mb20">
            <Col span="17" class="ivu-form-item-label" style="font-size: 20px">辽宁省残疾人两项补贴情况表</Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">姓名：</Col>
            <Col span="4" class="ivu-form-item-content"><Input v-model="mainmap.name" style="width: 150px"></Input></Col>
            <Col span="5" class="ivu-form-item-label">性别：</Col>
            <Col span="4" class="ivu-form-item-content"><Input v-model="mainmap.sex" style="width: 150px"></Input></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">身份证号码：</Col>
            <Col span="4"><Input v-model="mainmap.cardno" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">残疾证号码：</Col>
            <Col span="4"><Input v-model="mainmap.disability_certificate_number" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">残疾类别：</Col>
            <Col span="4"><Input v-model="mainmap.disability_type" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">残疾等级：</Col>
            <Col span="4"><Input v-model="mainmap.disability_grade" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">户籍性质：</Col>
            <Col span="4"><Input v-model="mainmap.household" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">户籍地址：</Col>
            <Col span="4"><Input v-model="mainmap.homeaddress" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">残疾人电话：</Col>
            <Col span="4"><Input v-model="mainmap.disablility_phone" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">家庭住址：</Col>
            <Col span="4"><Input v-model="mainmap.homeaddress" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">联系人：</Col>
            <Col span="4"><Input v-model="mainmap.name" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">联系人电话：</Col>
            <Col span="4"><Input v-model="mainmap.link_phone" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">补贴对象类型：</Col>
            <Col span="4"><Input v-model="usermap.subsidy_person_type" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">补贴类型：</Col>
            <Col span="4"><Input v-model="usermap.subsidy_type" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">补贴金额：</Col>
            <Col span="4"><Input v-model="usermap.subsidy_money" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">发放起始月份：</Col>
            <Col span="4"><Input v-model="usermap.grant_start_time" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">开户银行：</Col>
            <Col span="4"><Input v-model="usermap.bank_name" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">银行卡号：</Col>
            <Col span="4"><Input v-model="usermap.bank_num" style="width: 150px" /></Col>
        </Row>
        <Row class="mb20">
            <Col span="6" class="ivu-form-item-label">所属县区：</Col>
            <Col span="4"><Input v-model="usermap.county" style="width: 150px" /></Col>
            <Col span="5" class="ivu-form-item-label">所属乡镇：</Col>
            <Col span="4"><Input v-model="usermap.township" style="width: 150px" /></Col>
        </Row>
    </Form>
    <div slot="footer">
        <Button type="info" @click="applyStop()">申请户籍转移</Button>
        <Button @click="show1=false">关闭</Button>
    </div>
</Modal>
<Modal v-model="modal1" title="详情" width="600" @on-cancel="modal1===false">
    <Form label-position="right" :label-width="100">
        <Row class="mb20" >
            <Col span="8" class="ivu-form-item-label">区县：</Col>
            <Select v-model="searchInfo.level1" filterable transfer="" @on-change="getMailList(searchInfo.level1,1,null)" style="width: 288px;">
              <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
        </Row>
        <Row class="mb20">
            <Col span="8" class="ivu-form-item-label">街道：</Col>
            <Select v-model="searchInfo.level2" filterable transfer="" @on-change="getMailList(searchInfo.level2,2,null)" style="width: 288px;">
              <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
        </Row>
        <Row class="mb20">
            <Col span="8" class="ivu-form-item-label">社区：</Col>
            <Select v-model="searchInfo.level3" filterable transfer="" style="width: 288px;">
              <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
        </Row>
    </Form>
    <div slot="footer">
        <Button type="info" @click="saveForm()">确定</Button>
        <Button @click="modal1=false">关闭</Button>
    </div>
</Modal>
</div>
</template>

<script>
import { findCompountList, getMailLevelList, getUserInfo, updateOrderInfo, updatePersonnelTransfer } from '@/api/stree'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      dateTime: '',
      mailList: [[], [], []],
      companyGrade: 0,
      searchInfo: {
        level1: 0,
        level2: 0,
        level3: 0
      },
      searchDate: {
        name: '',
        code: '',
        start_time: '',
        end_time: ''
      },
      modal1: false,
      show1: false,
      columns1: [{
        title: '序号',
        type: 'index',
        width: 60,
        align: 'center'
      },
      {
        title: '区(县)',
        key: 'county',
        width: 100,
        align: 'center'
      },
      {
        title: '街道',
        key: 'township',
        width: 100,
        align: 'center'
      },
      {
        title: '姓名',
        key: 'name',
        width: 120,
        align: 'center'
      },
      {
        title: '身份证号',
        width: 200,
        key: 'cardno',
        align: 'center'
      },
      {
        title: '补贴对象类型',
        width: 210,
        key: 'subsidy_person_type',
        align: 'center'
      },
      {
        title: '补贴类型',
        width: 150,
        key: 'subsidy_type',
        align: 'center'
      },
      {
        title: '残疾类别',
        width: 200,
        key: 'disability_type',
        align: 'center'
      },
      {
        title: '残疾等级',
        width: 150,
        key: 'disability_grade',
        align: 'center'
      },
      {
        title: '补贴金额(元/月)',
        width: 130,
        key: 'subsidy_money',
        align: 'center'
      },
      {
        title: '发放起始时间',
        width: 150,
        key: 'grant_start_time',
        align: 'center'
      },
      {
        title: '发放截止时间',
        width: 150,
        key: 'grant_end_time',
        align: 'center'
      },
      {
        title: '状态',
        width: 100,
        key: 'state',
        align: 'center'
      },
      {
        title: '开户行',
        width: 100,
        key: 'bank_name',
        align: 'center'
      },
      {
        title: '账户名',
        width: 100,
        key: 'bank_people',
        align: 'center'
      },
      {
        title: '银行卡号',
        width: 150,
        key: 'bank_num',
        align: 'center'
      },
      {
        title: '残疾人证号',
        width: 150,
        key: 'disability_certificate_number',
        align: 'center'
      },
      {
        title: '性别',
        width: 150,
        key: 'sex',
        align: 'center'
      },
      {
        title: '户籍性质',
        width: 150,
        key: 'household',
        align: 'center'
      },
      {
        title: '家庭住址',
        width: 150,
        key: 'homeaddress',
        align: 'center'
      },
      {
        title: '民族',
        width: 150,
        key: 'nation',
        align: 'center'
      },
      {
        title: '残疾人电话',
        width: 150,
        key: 'disablility_phone',
        align: 'center'
      },
      {
        title: '联系人电话',
        width: 150,
        key: 'link_phone',
        align: 'center'
      },
      {
        title: '户籍情况',
        width: 150,
        slot: 'registerstr',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'registerstr'
      },
      {
        title: '低保情况',
        width: 150,
        slot: 'allowanceskind',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'allowanceskind'
      },
      {
        title: '残疾情况',
        width: 150,
        slot: 'disability_type',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'disability_type'
      },
      {
        title: '殡葬情况',
        width: 150,
        slot: 'funeral_info',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'funeral_info'
      },
      {
        title: '孤儿情况',
        width: 150,
        slot: 'orphan_info',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'orphan_info'
      },
      {
        title: '特困情况',
        width: 150,
        slot: 'difficulty_info',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'difficulty_info'
      },
      {
        title: '工伤情况',
        width: 150,
        slot: 'occupational_info',
        align: 'center',
        className: 'demo-table-info-column',
        key: 'occupational_info'
      },
      {
        title: '操作',
        slot: 'action',
        width: 150,
        align: 'center',
        fixed: 'right'
      }
      ],
      data6: [],
      formDate: {},
      mainmap: {},
      usermap: {},
      errorTitle: '错误提醒'
    }
  },
  methods: {
    // 疑点数据列表
    init () {
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        subType: '发放数据'
      }

      findCompountList(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.data6 = ret.data.data.results
          this.totalnum = ret.data.data.totalRecord
        } else {
          this.$Modal.error({
            title: '错误',
            content: ret.data.errmsg
          })
        }
      })
    },
    findinfo (param) { // 查看详情
      this.show1 = true
      getUserInfo({
        'cardno': param.cardno,
        'subsidy_type': param.subsidy_type
      }).then(ret => {
        if (ret.data.errcode === 0) {
          this.mainmap = ret.data.data.mainmap
          this.usermap = ret.data.data.usermap
          this.formDate = param
        } else {
          this.$Modal.error({
            title: '错误',
            content: ret.data.errmsg
          })
        }
      })
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    clearData () {
      this.searchDate = {}
      this.init()
    },
    // 社区统计下拉搜索框的级联查询
    getMailList (id, index, company_code) {
      if (id === 0) {
        this.mailList[index] = []
        this.searchInfo['level' + (index + 1)] = ''
        return
      }
      getMailLevelList({ id: id, company_code: company_code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    applyStop () { // 申请停发
      this.modal1 = true
    },
    all () {
      let data5 = {
        pageSize: this.currentPageSize,
        pageNo: 1,
        subType: '发放数据',
        name: this.searchDate.name,
        subsidy_type: this.searchDate.subsidy_type
      }

      findCompountList(data5).then(ret => {
        if (ret.data.errcode === 0) {
          this.data6 = ret.data.data.results
          this.totalnum = ret.data.data.totalRecord
        } else {
          this.$Modal.error({
            title: '错误',
            content: ret.data.errmsg
          })
        }
      })
    },
    saveForm () { // 提交申请
      if (this.searchInfo.level1 === 0 || this.searchInfo.level1 === '' || this.searchInfo.level1 === undefined) {
        this.$Modal.error({
          title: '请选择区域'
        })
        return
      }
      if (this.searchInfo.level2 === 0 || this.searchInfo.level2 === '' || this.searchInfo.level2 === undefined) {
        this.$Modal.error({
          title: '请选择街道'
        })
        return
      }
      if (this.searchInfo.level3 === 0 || this.searchInfo.level3 === '' || this.searchInfo.level3 === undefined) {
        this.$Modal.error({
          title: '请选择社区'
        })
        return
      }

      let item = this.mailList[2].find(res => {
        return res.id === this.searchInfo.level3
      })

      let params = {
        cardno: this.formDate.cardno,
        citystr: item.city,
        township: item.street,
        community: item.community
      }

      if (confirm('确定申请户籍转移?')) {
        updateOrderInfo(params).then(ret => { // 调用提交申请接口
          if (ret.data.errcode === 0) {
            updatePersonnelTransfer(params).then(ret => { // 调用提交申请接口
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.show1 = false
                this.searchInfo = {
                  level1: 0,
                  level2: 0,
                  level3: 0
                }
                this.$Notice.success({ title: '成功', desc: '' })
                this.init()
                return
              }
              this.$Notice.error({
                title: '户籍转移失败',
                desc: ret.data.errmsg
              })
            })
            return
          }

          if (confirm('没有相应的要件,是否确定申请户籍转移!')) {
            updatePersonnelTransfer(params).then(ret => { // 调用提交申请接口
              if (ret.data.errcode === 0) {
                this.modal1 = false
                this.show1 = false
                this.searchInfo = {
                  level1: 0,
                  level2: 0,
                  level3: 0
                }
                this.$Notice.success({ title: '成功', desc: '' })
                this.init()
                return
              }
              this.$Notice.error({
                title: '户籍转移失败',
                desc: ret.data.errmsg
              })
            })
          }
        })
      }
    }
  },
  mounted () {
    this.init()
    this.getMailList(null, 0, null)
  }
}
</script>
